<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ饭店在线</title>
    <style type="text/css">
        *{/*初始化css属性*/
            margin: 0;
            padding:0;
        }
        .wrap{/*设置对象宽度。css布局居中margin模式*/
            width: 300px;
            margin: 0px auto;

        }
        .menu{
            width: 600px;/*设置浏览器的宽度*/
            height: 95px;/*设置浏览器的大小*/
            top:0px;
        }
        .content ul li{/*图标处理*/
            height: 150px;
            overflow: hidden;
            border-bottom: 1px solid lavender;
            background: white;
            list-style-type: none;
            transition-duration: 0.5s;
            margin: 10px 10px 5px 0;

        }
        .content ul li:hover{
            background-color: lavender;
            transition-duration: 0.5s;
        }
        .content .left{
            overflow: scroll;
            transition-duration: 0.5s;
            width: 250px;
            height:150px;
            /*background: green;*/
            float: left;
            margin-right:20px;
        }
        .content .right{
            width:400px ;
            float: left;
            /*background: pink;*/
        }
        .right_top{
            height:60px;
        }
        .right_bottom{
            margin_top:50px;
        }
        .right_bottom_left span{
            color: darkgray;
            font-size: 12px;
        }

        l1 {
            font-family: 新宋体;
            font-size : 4em;
            color : #f00;
        }
        l2 {
            font-family: 新宋体;
            font-size : 2em;
            color : #f00;
        }
    </style>
</head>

<body>
<div class="wrap">
    <div class="menu">
        <ul>
            <l1>QQ饭店欢迎您</l1>
        </ul>
        <ul>
            <l2>菜单价目表</l2>
        </ul>
    </div>
</div>
<div class="content">
    <ul>
        <li>
            <div class="left"><img src="http://www.photophoto.cn/image/g77/161/008/1610080006.jpg" alt=""></div>
            <div class="right">
                <div class="right_top">
                    <h3>本店特色：    剁椒鱼头</h3>
                </div>
                <div class="right_bottom">
                    <h3>口味：   偏辣</h3>
                </div>
                <div class="right_bottom">
                    <h3>价格：   100/份</h3>
                </div>
            </div>
        </li>
    </ul>
</div>
<div class="content">
    <ul>
        <li>
            <div class="left"><img src="http://www.photophoto.cn/image/g77/161/008/1610080006.jpg" alt=""></div>
            <div class="right">
                <div class="right_top">
                    <h3>本店特色：    青椒炒瘦肉</h3>
                </div>
                <div class="right_bottom">
                    <h3>口味：   偏辣</h3>
                </div>
                <div class="right_bottom">
                    <h3>价格：   50/份</h3>
                </div>
            </div>
        </li>
        <div class="right_bottom">
            <div class="right_bottom_left">
                <span> 服务员随时为您服务</span>
            </div>
        </div>
    </ul>
</div>
</ul>
</li>
<li>创意菜/私房菜</li>
</ul>
<dl>
    <dt>联系客服人员:</dt>
    <dd><a type="https://gitee.com/wwwYechangwang/frontend_operation/edit/master/ht9.html" rel="external" title="Learn more about css">邮箱：nuomihelp@baidu.com</a> </dd>
    <dd>周一至周日 9:00-22:00</dd>
    <dt>客服电话 免长途费</dt>
    <dd>4006-888-887</dd>
</dl>
</body>
</html>